<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<title>车辆列表</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0">
		<link rel="stylesheet" type="text/css" href="../css/index.css">
		<script src="https://cdn.bootcss.com/jquery/1.9.1/jquery.min.js"></script>
		<script type="text/javascript" src="../js/config.js"></script>
		<script type="text/javascript" src="../js/vue.js"></script>
		<script type="text/javascript" src="../js/filter.js"></script>
		<script type="text/javascript" src="../js/index.js"></script>
	</head>

	<body style="padding-bottom: 54px;">
		<div id="shopHome">
			<!--       <div class="header">
        <div class="search-bar">
          <input type="search" name="" placeholder="请输入品牌或车系车型">
        </div>
      </div> -->
			<div class="select-bar">
				<div class="select-list">排序</div>
				<!-- <div class="select-list">品牌</div> -->
				<div class="select-list">价格</div>
			</div>
			<div class="select-box">
				<div class="overlay" style="top: 40px;"></div>
				<ul class="select-box-list" style="display: block; top: 40px;">
					<li class="select-box-list-item" data-index="0" onclick="filterSort(0)">默认排序</li>
					<li class="select-box-list-item" data-index="1" onclick="filterSort(1)">价格最低</li>
					<li class="select-box-list-item" data-index="2" onclick="filterSort(2)">价格最高</li>
					<li class="select-box-list-item" data-index="3" onclick="filterSort(3)">车龄最短</li>
					<li class="select-box-list-item" data-index="4" onclick="filterSort(4)">里程最少</li>
					<li class="select-box-list-item" data-index="5" onclick="filterSort(5)">最新发布</li>
				</ul>
			</div>

			<div class="select-box">
				<div class="overlay" style="top: 40px;"></div>
				<ul class="select-box-list" style="display: block; top: 40px;">
					<li class="select-box-list-item" data-index="0" onclick="filterPrice('','')">不限</li>
					<li class="select-box-list-item" data-index="1" onclick="filterPrice(0,10)">10万及以下</li>
					<li class="select-box-list-item" data-index="2" onclick="filterPrice(10,20)">10-20万</li>
					<li class="select-box-list-item" data-index="3" onclick="filterPrice(20,30)">20-30万</li>
					<li class="select-box-list-item" data-index="4" onclick="filterPrice(30,50)">30-50万</li>
					<li class="select-box-list-item" data-index="5" onclick="filterPrice(50,100)">50-100万</li>
					<li class="select-box-list-item" data-index="6" onclick="filterPrice(100,10000)">100万以上</li>
				</ul>
			</div>
			<div class="panel" style="margin-top: 0">
				<div class="panel-count">本店共有{{carsTotal}}辆</div>
				<a v-bind:href="'cars_detial.html' +params+'&carId='+ car.carId" v-for="car in carList">
					<div class="panel-list">
						<div class="cars-img">
							<img v-bind:src="imgUrl + car.carImage.imageUrl+'.r_240xh_160'" onerror="javascript:this.src='../images/default.png'">
							<!-- <img v-else="car.carImage.imageUrl" src="../images/default.png"> -->
						</div>
						<div class="cars-info">
							<h4>{{car.carTitle}}</h4>
							<div class="car-age">{{car.carLicenceDate | filterGetDate}}/{{car.carMileage}}万公里</div>
							<div class="car-price">
								<span class="price-number">{{car.carRetailPrice}}</span> 万
							</div>
						</div>
					</div>
				</a>
			</div>

			<div class="footer">
				<a v-bind:href="'home.html' + params" class="footer-nav footer-home">首页</a>
				<a v-bind:href="'cars_list.html' + params" class="footer-nav footer-cars on">买车</a>
				<a v-bind:href="'contact.html'+params" class="footer-nav footer-contact">联系</a>
			</div>
		</div>

	</body>

	<script type="text/javascript">
		document.documentElement.style.fontSize = document.documentElement.clientWidth / 37.5 + 'px';
		var shopHome = new Vue({
			el: '#shopHome',
			data: {
				res: {},
				carList: [],
				carsTotal: 0,
				imgUrl: imgUrl,
				marketId: marketId,
				shopId: shopId,
				params: '?marketId=' + marketId + '&shopId=' + shopId + '&imgUrl=' + imgUrl + '&customerShopId=' + customerShopId,
			},
			methods: {        },
		});
		$('.select-list').click(function() {
			if($(this).hasClass('on')) {
				$('.select-list').removeClass("on");
				$('.select-box').hide();
			} else {
				$(this).addClass('on').siblings().removeClass("on");
				$('.select-box').eq($(this).index()).show().siblings('.select-box').hide();
			}
		});
		$('.select-box .select-box-list-item').click(function() {
			$(this).addClass('on').siblings().removeClass("on");
			$('.select-list.on').html($(this).html());
			$('.select-list').removeClass("on");
			$('.select-box').hide();
		})
		$('.overlay').click(function() {
			$('.select-list').removeClass("on");
			$('.select-box').hide();
		});

		function initList(params) {
			$.ajax({
				type: "get", //data 传送数据类型。post 传递
				dataType: 'json', // 返回数据的数据类型json
				url: defaultUrl + "/controller/getCarList", // yii 控制器/方法
				cache: false,
				data: params, //传送的数据     
				error: function() {
					alert("数据传输错误");
				},
				success: function(data) {
					console.log(data);
					if(data.code != 1) {
						return false
					}
					console.log(data);

					shopHome.carList = data.result;
				}
			});
			$.ajax({
				type: "get", //data 传送数据类型。post 传递
				dataType: 'json', // 返回数据的数据类型json
				url: defaultUrl + "/controller/getCarNum", // yii 控制器/方法
				cache: false,
				data: params, //传送的数据     
				error: function() {
					alert("数据传输错误");
				},
				success: function(data) {
					console.log(data);
					if(data.code != 1) {
						return false
					}
					shopHome.carsTotal = data.result.total;
					// shopHome.carList = data.result.rows;

				}
			});
		};
		var brandId, startPrice, endPrice, modelTpyeId, srotName, srotMode;
		brandId = sessionStorage.getItem('brandId');
		startPrice = sessionStorage.getItem('startPrice');
		endPrice = sessionStorage.getItem('endPrice');
		modelTpyeId = sessionStorage.getItem('modelTpyeId');

		initList({
			'shopId': shopId,
			'marketId': marketId,
			'brandId': brandId,
			'fromFloorPrice': startPrice,
			'toFloorPrice': endPrice,
			'carTypeId': modelTpyeId
		});

		function filterSort(sortIndex) {
			if(sortIndex == 0) {
				srotName = '';
				srotMode = '';
				// sessionStorage.setItem('srotName','');
				// sessionStorage.setItem('srotMode','');
			} else if(sortIndex == 1) {
				srotName = 'CAR_SHOW_PRICE';
				srotMode = 'ASC';
				// sessionStorage.setItem('srotName','CAR_SHOW_PRICE');
				// sessionStorage.setItem('srotMode','ASC');
			} else if(sortIndex == 2) {
				srotName = 'CAR_SHOW_PRICE';
				srotMode = 'DESC';
				// sessionStorage.setItem('srotName','CAR_SHOW_PRICE');
				// sessionStorage.setItem('srotMode','DESC');
			} else if(sortIndex == 3) {
				srotName = 'CAR_LICENCE_DATE';
				srotMode = 'ASC';
				// sessionStorage.setItem('srotName','CAR_LICENCE_DATE');
				// sessionStorage.setItem('srotMode','ASC');
			} else if(sortIndex == 4) {
				srotName = 'CAR_MILEAGE';
				srotMode = 'ASC';
				// sessionStorage.setItem('srotName','CAR_MILEAGE');
				// sessionStorage.setItem('srotMode','ASC');
			} else if(sortIndex == 5) {
				srotName = 'CAR_CREATE_TIME';
				srotMode = 'ASC';
				// sessionStorage.setItem('srotName','CAR_CREATE_TIME');
				// sessionStorage.setItem('srotMode','ASC');
			}
			initList({
				'shopId': shopId,
				'marketId': marketId,
				'brandId': brandId,
				'fromFloorPrice': startPrice,
				'toFloorPrice': endPrice,
				'orderColunm': srotName,
				'orderMode': srotMode
			});
		}

		function filterPrice(_startPrice, _endPrice) {
			startPrice = _startPrice;
			endPrice = _endPrice;
			initList({
				'shopId': shopId,
				'marketId': marketId,
				'brandId': brandId,
				'fromFloorPrice': startPrice,
				'toFloorPrice': endPrice,
				'orderColunm': srotName,
				'orderMode': srotMode
			});
		}

		// $.ajax({
		//   type: "get",      //data 传送数据类型。post 传递
		//   dataType: 'json',  // 返回数据的数据类型json
		//   url: defaultUrl+"/controller/getCarById",  // yii 控制器/方法
		//   cache: false, 
		//   data: {'carId': carId},  //传送的数据     
		//   error:function(){
		//     alert("数据传输错误");
		//   },success: function (data) {
		//     console.log(data);
		//     if (data.code != 1) {
		//       return false
		//     }
		//     pricetag.res = data.result;
		//   } 
		// });

		// $.ajax({
		//   type: "get",      //data 传送数据类型。post 传递
		//   dataType: 'json',  // 返回数据的数据类型json
		//   url: defaultUrl+"/controller/getCarConfById",  // yii 控制器/方法
		//   cache: false,      
		//   data: {'carId': carId},  //传送的数据
		//   error:function(){
		//      alert("数据传输错误");
		//   },success: function (data) {
		//     console.log(data);
		//      if (data.code != 1) {
		//       return false
		//      }
		//      for (var i = 0; i < data.result.length; i++) {
		//         for (var j = 0; j < data.result[i].childCarConf.length; j++) {
		//           if (data.result[i].childCarConf[j].selectedState) {
		//             pricetag.carConfList.push(data.result[i].childCarConf[j].confName);
		//           }
		//           if (pricetag.carConfList.length>0) {
		//             pricetag.carConfListBoolean = true;
		//           }else{
		//             pricetag.carConfListBoolean = false;
		//           }
		//         }
		//      }
		//   }
		// });
	</script>

</html>